<template>
	<div class="edit">
		<van-nav-bar
		title="新建纪念馆"
		left-arrow
		@click-left="onClickLeft"
		/>
		<van-notice-bar
		text="逝者基本信息（以下逝者基本信息为必填，且不可变更，请谨慎填写）"
		/>
		<ul class="ul">
			<li>
				<span>出生日期</span>
				<el-date-picker
				v-model="birthDate"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="选择逝者出生日期时间">
				</el-date-picker>
			</li>
			<li>
				<span>逝去时间</span>
				<el-date-picker
				v-model="dieDate"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="选择逝者死亡日期时间">
				</el-date-picker>
			</li>
		</ul>
		<van-cell-group>
            <van-field
                v-model="name"
                required
                clearable
                label="姓名"
                placeholder="请输入姓名"
            />
			<van-field
                required
                v-model="years"
                label="享年"
				type="number"
                placeholder="请输入逝者享年多少岁"
            />
            <van-field
                v-model="sex"
                label="性别"
                placeholder="请选择性别"
                required
				@focus="sexF"
				readonly="readonly"
            />
            <van-field
                v-model="nation"
                label="民族"
                placeholder="请选择民族"
                required
				@focus='minF'
				readonly="readonly"
            />
            <van-field
                required
                v-model="work"
                label="职业"
                placeholder="请选择逝者职业"
				@focus='workF'
				readonly="readonly"
            />
			<van-field
                required
                v-model="reason"
                label="逝因"
                placeholder="请选择死亡原因"
				@focus='reasonF'
				readonly="readonly"
            />
			<van-field
                required
                v-model="name1"
                label="建馆者姓名"
                placeholder="请输入您的姓名"
            />
			<van-field
                required
                v-model="number"
				type="number"
                label="身份证号码"
                placeholder="请输入您的身份证号码"
            />
			<van-field
                required
                v-model="relation"
                label="与逝者关系"
                placeholder="请输入您与逝者的关系"
            />
        </van-cell-group>
		<ul class="ul">
			<li>
				<span>逝者遗照</span>
				<van-uploader :after-read="onRead">
					<van-icon name="photograph" />
				</van-uploader>
			</li>
			<li style="display: block;width: 100%;height: 100px;" v-show="diePic != ''">
				<img :src="diePic" />
			</li>
			<li>
				<span>馆主手持证件照</span>
				<van-uploader :after-read="onRead1">
					<van-icon name="photograph" />
				</van-uploader>
			</li>
			<li style="display: block;width: 100%;height: 100px;" v-show="cardPic != ''">
				<img :src="cardPic" />
			</li>
		</ul>
		<div style="padding-left: 8px;line-height: 45px;font-size: 14px;" @click="chooseA">
			<div style="display: flex;">
				<span style="color: red;">*</span>
				<span style="margin-right: 20px;">请选择地域</span>
				<p>
					{{aValue1}}-{{aValue2}}-{{aValue3}}-{{aValue4}}
				</p>
			</div>
		</div>
		<div style="width: 150px;margin: 0 auto;margin-bottom: 50px;display: flex; text-align: center;">
			<span style="width: 14px;height: 14px;border-radius: 50%;border: 1px solid #31a2c8;display: inline-block;margin-top: 12px;margin-right: 10px;" :style="{background: bgspan}" @click="spanC"></span>
			<span class="value" @click="message">久久怀念网使用协议</span>
		</div>
		<van-picker :columns="sexs" v-show="sC" show-toolbar @cancel="sCancel" @confirm="sConfirm" title="性别"/>
		<van-picker :columns="mins" v-show="mC" show-toolbar @cancel="mCancel" @confirm="mConfirm" title="民族"/>
		<van-picker :columns="jobs" v-show="zC" show-toolbar @cancel="zCancel" @confirm="zConfirm" title="职业"/>
		<van-picker :columns="addresss" v-show="aC" show-toolbar @cancel="aCancel" @confirm="aConfirm" title="地域"/>
		<van-picker :columns="dies" v-show="dieC" show-toolbar @cancel="rCancel" @confirm="rConfirm" title="死亡原因"/>
		<van-button size="large" @click="toPayPage">上传</van-button>
		<div class="bg" v-show="bgS"></div>
		<div class="chooseAShow" v-show="chooseAShow">
			<div style="height: 40px;line-height: 40px; padding: 20px; background: #ccc;">{{aValue1}}-{{aValue2}}-{{aValue3}}-{{aValue4}}</div>
			<ul style="min-height: 150px;max-height: 150px;overflow: auto;">
				<li v-for="(item,index) in pro" @click="li(item, index)" :key="item.name" v-show="li1show">
					{{item.name}}
				</li>
			</ul>
			<div style="padding-left: 150px;">
				<van-button type="default" @click="licancel">取消</van-button>
				<van-button type="default" :disabled="!sureli" @click="licancel">确认</van-button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data () {
		return {
			picurlofdeath: '',
			imageUrl: '',
			cardPic: '',
			sureli: false,
			li1show: true,
			li2show: false,
			li3show: false,
			li4show: false,
			addresss: [],
			chooseAShow: false,
			ccc: false,
			bgspan:'',
			aValue: '',
			selx: '',
			aValue1: '',
			aValue2: '',
			aValue3: '',
			aValue4: '',
			pro: [
			],
			pro1: [
			],
			pro2: [
			],
			pro3: [
			],
			sC: false,
			mC: false,
			zC: false,
			dieC: false,
			aC: false,
			bgS: false,
			name: '',
			years: '',
			name1: '',
			sex: '',
			sexV: '',
			work: '',
			address1: '',
			address2: '',
			address3: '',
			address4: '',
			address: '',
			number: '',
			relation: '',
			reason: '',
			nation: '',
			birthDate: '',
			dieDate: '',
			sexs: [
				'男',
				'女'
			],
			mins: [
				'汉族',
				'壮族',
				'藏族',
				'蒙古族',
				'朝鲜族',
				'满族',
				'维吾尔族',
				'回族',
				'裕固族',
				'彝族',
				'瑶族',
				'锡伯族',
				'乌孜别克族',
				'佤族',
				'土家族',
				'土族',
				'塔塔尔族',
				'塔吉克族',
				'水族',
				'畲族',
				'撒拉族',
				'羌族',
				'普米族',
				'怒族',
				'纳西族',
				'仫佬族',
				'苗族',
				'门巴族',
				'毛南族',
				'珞巴族',
				'僳僳族',
				'黎族',
				'拉祜族',
				'柯尔克孜族',
				'景颇族',
				'京族',
				'基诺族',
				'赫哲族',
				'哈萨克族',
				'哈尼族',
				'仡佬族',
				'高山族',
				'鄂温克族',
				'俄罗斯族',
				'鄂伦春族',
				'独龙族',
				'东乡族',
				'侗族',
				'德昂族',
				'傣族',
				'达斡尔族',
				'布依族',
				'布朗族',
				'保安族',
				'白族',
				'阿昌族'
			],
			jobs: [
				'管理人员',
				'技术人员',
				'办事员',
				'商业及服务人员',
				'生产人员',
				'军人',
				'学生',
				'农林牧渔业人员',
				'教师',
				'其它'
			],
			dies: [
				'病逝',
				'遇难',
				'遇害',
				'自杀',
				'天年',
				'其它'
			],
			id: '11',
			openid:'11',
			userid:'11',
			diePic: '',
			picurlinhand: '',
			prtid: '0'
		}
	},
	created () {
		this.addressss()
	},
	methods: {
		addressss () {
			var that = this
			this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+this.prtid+"")
				.then(function(res){
					// alert(1)
					// that.$router.push('/')
					// console.log(JSON.parse(res.data).data)
					that.pro = JSON.parse(res.data).data
					// that.pro1 = JSON.parse(res.data).
					// console.log(that.pro)
				},function(err){
				}).catch(function(error){
				});
		},
		handleAvatarSuccess () {

		},
		licancel () {
			this.chooseAShow = false
			this.bgS = false
			
		},
		li (item, n) {
			
			if (this.pro != this.pro1 && this.pro != this.pro2 && this.pro != this.pro3) {
				this.aValue1 = item.name
				this.prtid = item.id
				var that = this	
				this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+this.prtid+"")
				.then(function(res){
					// alert(1)
					// that.$router.push('/')
					// console.log(JSON.parse(res.data).data)
					that.pro1 = JSON.parse(res.data).data
					// console.log(that.pro1)
					that.pro = that.pro1
					// that.pro1 = JSON.parse(res.data).
					// console.log(that.pro)
				},function(err){
				}).catch(function(error){
				});
				
				// console.log(this.pro)
			} else if (this.pro == this.pro1 && this.pro != this.pro2 && this.pro != this.pro3) {
				// alert(2)
				this.aValue2 = item.name
				this.prtid = item.id
				var that = this	
				this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+this.prtid+"")
				.then(function(res){
					// alert(1)
					// that.$router.push('/')
					// console.log(JSON.parse(res.data).data)
					that.pro2 = JSON.parse(res.data).data
					// console.log(that.pro1)
					that.pro = that.pro2
					// that.pro = that.pro1
					// that.pro1 = JSON.parse(res.data).
					// console.log(that.pro)
				},function(err){
				}).catch(function(error){
				});
				
			} else if (this.pro == this.pro2 && this.pro != this.pro3) {
				// alert(3)
				this.aValue3 = item.name
				this.prtid = item.id
				var that = this	
				this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+this.prtid+"")
				.then(function(res){
					that.pro3 = JSON.parse(res.data).data
					that.pro = that.pro3
				},function(err){
				}).catch(function(error){
				});
				// this.pro = this.pro3
			} else if (this.pro == this.pro3) {
				// alert(4)
				this.aValue4 = item.name
				// this.pro = this.pro4
				this.prtid = item.id
				var that = this	
				this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+this.prtid+"")
				.then(function(res){
					that.pro4 = JSON.parse(res.data).data
					that.pro = that.pro4
				},function(err){
				}).catch(function(error){
				});
				// th
			}

			if (this.aValue4 != '') {
				this.sureli = true
			}
 		},
		chooseA () {
			this.chooseAShow = true
			this.bgS = true
		},
		spanC () {
			this.ccc = !this.ccc
			if (this.ccc == true) {
				this.bgspan = '#31a2c8'
			} else {
				this.bgspan = '#fff'
			}
		},
		message () {
			this.$router.push('/message')
		},
		aCancel () {
			this.aC = false
			this.bgS = false
		},
		aConfirm (value) {
			this.aC = false
			this.bgS = false
			if (this.aValue == 0) {
				this.aValue1 = value
			}else if (this.aValue == 1) {
				this.aValue2 = value
			}else if (this.aValue == 2) {
				this.aValue3 = value
			}else if (this.aValue == 3) {
				this.aValue4 = value
			}
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			} else if (type === 'month') {
				return `${value}月`
			}
			return value;
		},
		onClickLeft () {
			this.$router.push('/')
		},
		toPayPage () {
			// this.sex == '男' ? this.sex = 0 : this.sex = 1
			// alert(this.sexV)
			if (this.birthDate == '') {
				alert('请选择逝者出生日期时间')
			}else if (this.dieDate == '') {
				alert('请选择逝者死亡日期时间')
			}else if (this.name == '') {
				alert('请填写逝者姓名')
			}else if (this.years == '') {
				alert('请选择逝者年岁')
			}else if (this.sex == '') {
				alert('请选择逝者性别')
			}else if (this.nation == '') {
				alert('请选择逝者民族')
			}else if (this.work == '') {
				alert('请选择逝者职业')
			}else if (this.reason == '') {
				alert('请选择逝者死亡原因')
			}else if (this.name1 == '') {
				alert('请输入建馆者的姓名')
			}else if (this.number == '') {
				alert('请输入您的身份证号码')
			}else if (this.number.length != 18){
				alert('请输入18位身份证号码')
			}else if (this.relation == '') {
				alert('请输入您与逝者的关系')
			}else if (this.aValue1 != '') {
				alert('请选择省市区')
			}else if (this.aValue2 != '') {
				alert('请选择地市区')
			}else if (this.aValue3 != '') {
				alert('请选择县市区')
			}else if (this.aValue4 != ''){ 
				alert('请选择县镇街')
			}else if (this.ccc == false){ 
				alert('请查看协议并勾选')
			}else {
				var that = this
				this.$dialog.confirm({
					title: '纪念馆创建信息',
					message: '您将确认发布并上传相应纪念馆创建信息吗？确定后第一版的纪念馆信息在“综合馆”予以展示'
				}).then(() => {
					this.$axios.get("/huainianwang/memorial/app/createMemorialInfo?id="+this.id+"&userid="+this.userid+"&openid="+this.openid+"&borndate="+this.birthDate+"&deathdate="+this.dieDate+"&username="+this.name+"&liveage="+this.years+"&gender="+this.sexV+"&national="+this.nation+"&job="+this.work+"&reasonofdeath="+this.reason+"&createname="+this.name1+"&idcard="+this.number+"&relationship="+this.relation+"&picurlofdeath="+this.picurlofdeath+"&area="+this.aValue1 + this.aValue2 + this.aValue3 + this.aValue4 +"&picurlinhand="+this.picurlinhand+"")
					.then(function(res){
						// alert(1)
						that.$router.push('/')
					},function(err){
					}).catch(function(error){
					});
				}).catch(() => {
					// on cancel
				});
			}
		},
		sexF () {
			this.sC = true
			this.bgS = true
		},
		minF () {
			this.bgS = true
			this.mC = true
		},
		workF () {
			this.bgS = true
			this.zC = true
		},
		reasonF () {
			this.bgS = true
			this.dieC = true
		},
		aF () {
			
		},
		onRead (file) {
			// alert(1)
			const that=this;
			that.diePic = file.content
			let name = "逝者遗照" + this.id
			this.$axios.post("/huainianwang/picInfo/app/upLoadJpg?", {
				url: file.content,
				name: name
			}).then(function(res){
					that.picurlofdeath = res.data.object
				},function(err){
				}).catch(function(error){
				});
		},
		onRead1 (file) {
			// alert(1)
			const that=this;
			that.cardPic = file.content
			let name = "身份证照片" + this.id
			this.$axios.post("/huainianwang/picInfo/app/upLoadJpg?", {
				url: file.content,
				name: name
			}).then(function(res){
					that.picurlinhand = res.data.object
				},function(err){
				}).catch(function(error){
				});
		},
		sCancel () {
			this.sC = false
			this.bgS = false
		},
		sConfirm (value) {
			this.sC = false
			this.bgS = false
			this.sex = value
			this.sex == '男'?this.sexV = 0:this.sexV = 1
		},
		mCancel () {
			this.mC = false
			this.bgS = false
		},
		mConfirm (value) {
			this.mC = false
			this.bgS = false
			this.nation = value
		},
		zCancel () {
			this.zC = false
			this.bgS = false
		},
		zConfirm (value) {
			this.zC = false
			this.bgS = false
			this.work = value
		},
		rCancel () {
			this.dieC = false
			this.bgS = false
		},
		rConfirm (value) {
			this.dieC = false
			this.bgS = false
			this.reason = value
		},
		
		bCancel () {
			this.bC = false
			this.bgS = false
		},
		bConfirm (value) {
			this.bC = false
			this.bgS = false
			this.birthDate = this.turnTime(String(value))
		},
		dCancel () {
			this.dC = false
			this.bgS = false
		},
		dConfirm (value) {
			this.dC = false
			this.bgS = false
			this.dieDate = this.turnTime(String(value))
		},
		turnTime (time) {
			let month = time.substring(4,7)
			let mapTree = new Map([['Jan','01'],['Feb','02'],['Mar','03'],['Apr','04'],['May','05'],['Jun','06'],['Jul','07'],['Aug','08'],['Sep','09'],['Oct','10'],['Nov','11'],['Dec','12']])
			let date = time.substring(11,15) + '-' + mapTree.get(month) + '-' + time.substring(8,10)
			return date
		}
	}
}
</script>
<style lang="scss" scoped>
.chooseAShow {
	width: 100%;
	height: 300px;
	position: fixed;
	bottom: 0px;
	background: #fff;
	box-shadow: 2px 2px 2px #ccc;
}
p {
	font-size: 12px;
}
.value{
  color: #31a2c8;
  font-size: 13px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  text-decoration: underline;
}
ul li {
	display: flex;
    padding: 10px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 24px;
    position: relative;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    overflow: hidden;
	border-bottom: 1px solid #f1f1f1;
	img {
		width: 80px;
		height: 80px;;
	}
	span {
		display: inline-block;
		max-width: 90px;
		-webkit-box-flex: 1;
    	-ms-flex: 1;
    	flex: 1;
	}
}
.ul li::before {
    content: '*';
    position: absolute;
    left: 7px;
    font-size: 14px;
    color: #f44;
}
.van-picker{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1000;
}
.bg {
	background: rgba(0, 0, 0, .4);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 350px;
}
.el-select {
    display: inline-block;
    position: relative;
    width: 40%;
    margin-left: 5%;
}
.input .el-input {
	width: 45%;
}
</style>
<style>

</style>
